<template>
  <div class="c-form">
    <Form :label-width="labelWidth">

      <template v-for="(item,index) in data">

        <Form-item :label="item.name">

          <template v-for="select in item.attachment">

            <selectBox v-if="+item.css === 1" :img="select.img" :text="select.name" @click.native="selectItem(data[index],select.id)" :checked="select.id == data[index].val"></selectBox>

            <selectBoxText v-if="+item.css === 2" :text="select.name"  @click.native="selectItem(data[index],select.id)"  :checked="select.id == data[index].val"></selectBoxText>

          </template>

          <selectBoxInput @change="getInput" v-if="+item.css === 3" :title="item.title" :min="item.min" :max="item.max" :index="index" ref="selectInput"></selectBoxInput>

          <selectBoxInput @change="getInput" :title="item.title" v-if="+item.css ===  4" :text="item.text" inputType="text" :index="index" ref="selectInput"></selectBoxInput>

          <drupload @change="getImgList" v-if="+item.css === 5" :max="item.max"  :limit="item.limit" :ajax="item.ajax" :index="index"   ref="selectInput"></drupload>

        </Form-item>

      </template>

    </Form>
  </div>
</template>
<script>
   import selectBox from "base/selectbox";
   import selectBoxText from "base/selectboxText";
   import selectBoxInput from "base/selectBoxInput";
   import drupload from "base/upload";

   export default {
        props: {
          labelWidth:{
             type:Number,
             default:100
          },
          data:{
            type: Array,
            default:[]
          },
          required:{
            type:Boolean,
            default:true
          }
        },
        data() {
            return {}
        },
        methods: {
          vaildForm() {
            // 验证input
            let vaild =this.$refs.selectInput?this.$refs.selectInput.every((selectInput,index)=>{
              return selectInput.vaild()
            }):true;
            let vaild2 = this.data.every((item) => {
              return item.val !== -1
            });
            return vaild && vaild2
          },
          normalizeForm() {
            let data = {};
            this.data.forEach((item, index) => {
              data[item.id] = item.val;
            });
            return data
          },
          selectItem(content, id) {
            content.val === id?content.val= -1:content.val = id;
          },
          getInput(input) {
            this.data[input.index].val = input.val;
          },
          getImgList(imgs){
            this.data[imgs.index].val = imgs.imgs
            console.log(this.data[imgs.index].val)
          }
        },
        components: {
          selectBox,
          selectBoxText,
          selectBoxInput,
          drupload
        },
        mounted() {

        },
        created() {

        },
    }
</script>

<style lang="less">

</style>
